<template>
  <div class="main">
    <router-view></router-view>
  </div>
  <div class="nav">
    <router-link :to="{ path: '/home' }"><img src="./assets/images/01.jpg" alt=""></router-link>
    <router-link :to="{ path: '/xiaozhen' }"><img src="./assets/images/02.jpg" alt=""></router-link>
    <router-link :to="{ path: '/fabu' }"><img src="./assets/images/03.jpg" alt=""></router-link>
    <router-link :to="{ path: '/gouwu' }"><img src="./assets/images/04.jpg" alt=""></router-link>
    <router-link :to="{ path: '/wode' }"><img src="./assets/images/05.jpg" alt=""></router-link>
  </div>


</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {


    return {}
  }
})
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.nav{
  width: 100%;
  height: 60px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  z-index: 9999;
  opacity: 1;
  border-top: 2px solid #F1F1F1;
  background-color: white;
}
a{
  text-decoration: none;
  color: aqua;
}
img{
  height: 100%;
  width: 50px;
  align-items: center;
}
</style>